<template>
<div class="content_box">
  <div class="zhnwe"></div>
  <div class="auth_top">
    <div class="top_img">
      <img src="/static/images/login/logo.png" alt="" srcset="">
    </div>
  </div>
  <div class="auth_btn">
  
    <div class="tips">
      <van-checkbox 
      checked-color="#f9e55e" 
      icon-size="16px" 
      :value="checked " 
      @change="changeCheckbox">已阅读并同意</van-checkbox>
      <p><span @click="goLink">《用户隐私政策》</span></p>
      </div>
    <button v-if="checked" class="get_phone" open-type="getPhoneNumber" @getphonenumber="getPhoneNum">微信用户一键登录</button>
    <button v-else class="get_phone" @click="noneAgree">微信用户一键登录</button>
  </div>
  <div class="auth_bottom" @click="goBack">取消登录</div>
</div>
</template>

<script>
// import { 
//   setusrInfo,
// } from "@/utils/auth";
import { setUserPhone } from "@/api/chengx";
export default {
  data() {
    return {
      checked:false,
      userPerf:null
    };
  },
  methods: {
    goLink(){
      wx.navigateTo({
          url: '/pages/protocol/main',
        });
    },
    goBack(){
      wx.navigateBack({
        delta: 1
      });
    },
  //  onChange(e){
  //    console.log(e)
  //    this.checked = e.mp.detail
  //    wx.getUserProfile({
  //     lang:'zh_CN',
  //     desc:'展示用户信息',
  //     success:(res)=>{
  //       setusrInfo(res.userInfo)
  //     },
  //     fail:(err)=>{
  //       this.checked = false
  //     }
  //   })
  //  },

  //  // 获取手机号
  //   getPhoneNumber(e){
  //     console.log(e)
  //     let data = {
  //       encryptedData:e.target.encryptedData,
  //       iv:e.target.iv,
  //     }
  //     getUserPhone(data).then(res=>{
  //       if(res.statusCode == '00000'){
  //         wx.navigateBack({
  //           delta: 1
  //         })
  //       }
  //     })
  //   },
    noneAgree(){
        wx.showToast({
          title: '请勾选同意应许之地平台用户服务协议',
          icon: 'none',
          duration: 2000
        })
    },
     // 获取电话号码
    getPhoneNum (e) {
      if (!this.checked) {
        wx.showToast({
          title: '您还未同意应许之地平台用户服务协议~',
          icon: 'none',
          duration: 2000
        })
        return 
        
      }
      
      if (!e.target.encryptedData) {
        wx.showToast({
          title: '已取消',
          icon: 'none',
          duration: 1000
        })
        return 
      }
      if (e.target.errMsg !== 'getPhoneNumber:ok') {
        return false
      }
      
      var that = this
      //检查登录态是否过期
      wx.checkSession({
        success (res) {
          // 获取手机号
         setUserPhone({
               encryptedData: e.target.encryptedData,
              iv: e.target.iv
            })
            .then(res => {
              if(res.statusCode == '00000'){

                wx.navigateBack({
                  delta: 1  // 返回上一级页面。
                })
              }else{
                return
                 wx.showToast({
                  title: '当前网络不稳定,请尝试重新登录~',
                  icon: 'none',
                  duration: 2000
                })
              }
            }).catch(error => {
              wx.showToast({
                title: '网络开小差了~',
                icon: 'none',
                duration: 1000
              })
            })
          // })
        },
        fail (err) {
           wx.showToast({
                title: '当前网络不稳定，请稍后~',
                icon: 'none',
                duration: 2000
              })
              setTimeout(() => {
                 wx.navigateBack({
                        delta: 1  // 返回上一级页面。
                    })
              }, 1500);   
        }
      })
      // debugger
    },
    changeCheckbox(e){
      console.log(e)
      const that=this
      if(this.checked){
        this.checked=!this.checked
        return
      } 
      this.checked=true
    },
  },
  onShow(){
    this.checked=false

  },
  onLoad(options) {
  },
};
</script>

<style lang="scss" scoped>
/* 去除button默认样式 */

  button::after {
   border: none;
  }

  button {
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
    line-height:inherit;
  }
  button {
  border-radius:0;
}
.content_box {
  // min-height: 100vh;
  background: #fff;
  font-family: '苹方';
  .zhnwe{
    width: 100%;
    height: 1px;
  }
  .auth_bottom{
    position: fixed;
    bottom: 30px;
    width: 100%;
height: 34px;
color: rgba(153, 153, 153, 1);
font-size: 24rpx;
font-weight: 500;
margin: 0 auto;
text-align: center;
  }
  .auth_btn{
    width: 600rpx;
    // height: 80rpx;
    margin: 0px auto;
    .tips{
      color: #999999;
      font-size: 26rpx;
      font-weight: 500;
      margin-bottom: 30rpx;
      margin-left: 20px;
      display: flex;
     align-items: center;
      /deep/ .van-checkbox__label{
         color: #999999;
         margin-left: 4px;
         font-weight: 500;
        // padding:10rpx 0;
      }
      /deep/ .van-checkbox__icon{
        width: 30rpx !important;
        height: 30rpx !important;
        margin-top: -1px;
      }
      p{
        margin-left: 5px;
      }
      span{
        color: #f9e55e;
      }
    
    }
    .get_phone{
     width: 630rpx;
height: 88rpx;
margin: 0 auto;
border-radius: 100rpx;
overflow: hidden;
 background: #f9e55e;
color: #000000;
font-size: 32rpx;
font-weight: 700;
line-height: 88rpx;
text-align: center;
    }
  }
  .auth_top{
    //  width: 600rpx;
     
    // padding: 40rpx 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    .top_img{
      width: 450rpx;
      height: 138rpx;
      overflow: hidden;
      margin: 200rpx auto 160rpx auto;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .top_text{
      margin-left: 10px;
      p:first-child{
        font-size: 30px;
         font-weight: 700;
      }
      p:last-child{
        font-size: 26rpx;
        // margin-top: 2px;
      }
    }
  }
  
}

</style>